import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import { urlParse } from '@/utils/utils';

const { Description } = DescriptionList;

@connect(({ onebilling, loading }) => ({
  loading: loading.models.onebilling,
  empDetail: onebilling.empDetail,
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  state = {};

  componentDidMount() {
    const { dispatch, location } = this.props;
    const tempUrl = location.search;
    const { onceFeeId } = urlParse(tempUrl);

    dispatch({
      type: 'onebilling/empDetail',
      payload: { onceFeeId },
    });
  }

  closeDetail = () => {
    router.goBack();
  };

  render() {
    const { empDetail } = this.props;
    return (
      <PageHeaderWrapper>
        <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>}>
          <DescriptionList>
            <Description term="产品名称">{empDetail.pdName || '--'}</Description>
            <Description term="客户名称">
              {`${empDetail.custName}（${empDetail.custNo}）` || '--'}
            </Description>
            <Description term="商务合同">{empDetail.custContName || '--'}</Description>
            <Description term="雇员姓名">{empDetail.empName || '--'}</Description>
            <Description term="证件类型">{empDetail.idTypeName || '--'}</Description>
            <Description term="证件号">{empDetail.idNo || '--'}</Description>
            <Description term="业务年月">
              {empDetail.busiYm
                ? `${`${empDetail.busiYm}`.substring(0, 4)}-${`${empDetail.busiYm}`.substring(4)}`
                : '--'}
            </Description>
            <Description term="状态">{empDetail.feeStaName || '--'}</Description>
            <Description term="编号">{empDetail.onceFeeEmpNo || '--'}</Description>
            <Description term="创建时间">
              {(empDetail.creTime && moment(empDetail.creTime).format('YYYY-MM-DD HH:mm')) || '--'}
            </Description>
            <Description term="创建人">{empDetail.creName || '--'}</Description>
            <Description term="备注">{empDetail.remark || '--'}</Description>
            <Description term="确认收费人员">{empDetail.feeUserName || '--'}</Description>
            <Description term="确认收费时间">
              {(empDetail &&
                empDetail.feeUserTime &&
                moment(empDetail.feeUserTime).format('YYYY-MM-DD HH:mm')) ||
                '--'}
            </Description>
          </DescriptionList>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.closeDetail}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
